/*----------------------------------------*\
  MAIN NAVIGATION
\*----------------------------------------*/


.mobile-menu .main-navigation,
.main-navigation--mobile {
  @apply flex flex-col;
}

.desktop-menu .main-navigation,
.main-navigation--desktop {
  @apply flex w-full h-full;
  @apply hidden lg:flex;
  @apply h-14 xl:h-16 3xl:h-20;
  @apply -ml-4;
  @apply relative;

  ul {
    @apply flex h-full;
  }

  ul ul {
    @apply hidden;
  }

  & > ul > li > a {
    @apply lg:flex lg:items-center relative;
    @apply lg:h-full lg:px-4;
    @apply hover:text-primary-600 leading-tight;
    @apply whitespace-nowrap;
    @apply transition-all;

    &::after {
      content: '';
      @apply block;
      @apply h-[3px];
      @apply absolute right-4 bottom-0 left-4;
      @apply transition;
    }

    &:focus-visible {
      @apply ring-inset;
    }

    &.active::after,
    &:hover::after {
      @apply bg-primary-500;
    }

    &.clicked {
      @apply bg-white shadow-2xl;
      @apply relative z-50;
      clip-path: inset(-50px -50px -1px -50px); /* crop shadow at the bottom */
    }
  }

  & > ul > li > a > .icon {
    @apply hidden;
  }

  & > ul > li > a > .icon--MoreFilled {
    @apply block;
  }
}
